import { View, Text, Input } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { AtForm, AtInput, AtTabs, AtTabsPane } from 'taro-ui'
import { useState } from 'react'
import './index.scss'

export default function Index() {
  const [value, setValue] = useState(0);
  const [form, setForm] = useState({
    input1: '',
    input2: '',
    input3: '',
  })

  useLoad(() => {
    console.log('Page loaded.')
  })

  const tabList = [
    { title: '时辰起局' },
    { title: '随机起局' },
  ]

  const handleClick = (index: number) => {
    console.log(index)
    setValue(index)
  }
  return (
  
    <View className='index'>
      <Text>小六壬</Text>
      <AtTabs current={value} tabList={tabList} onClick={handleClick}>
        <AtTabsPane current={value} index={0}>
          <View>
            <Text>时辰起局</Text>
          </View>
        </AtTabsPane>
        <AtTabsPane current={value} index={1}>
          <View>
            <Text>随机起局</Text>
          </View>
        </AtTabsPane>
      </AtTabs>
      <AtForm>
        <AtInput
          name='input1'
          title='随机数1'
          type='text'
          placeholder='这是一个输入框'
          value={form.input1}
          onChange={(e:any) => {
            console.log(e)
            setForm({...form, input1: e })
          }}
        />
        <AtInput
          name='input2'
          title='随机数2'
          type='text'
          placeholder='这是一个输入框'
          value={form.input2}
          onChange={(e:any) => {
            console.log(e)
            setForm({...form, input2: e })
          }}
        />
        <AtInput
          name='input3'
          title='随机数3'
          type='text'
          placeholder='这是一个输入框'
          value={form.input3}
          onChange={(e:any) => {
            console.log(e)
            setForm({...form, input3: e })
          }}
        />
      </AtForm>

    </View>
  )
}
